<template>
  <div style="height: 100%;width: 100%">
    <div style="border: black solid 2px;height: 10%">
      <el-container style="height:100%;">
        <el-header style="height:100%;background: #0a0a0a">
          <!--首页上方固定页面-->
          <div style="display: flex;height:100%;width:100%;justify-content: space-between;">

            <div style="width: 10%;">
              <div class="logo">
                <img :src="logo" alt="logo">
                <span style="color: white;margin-left: 8px;">星月</span>
              </div>
            </div>

            <div class="index-seach">
              <el-input
                placeholder="请输入课程"
                prefix-icon="el-icon-search"
                v-model="courseSeach"
              >
              </el-input>
            </div>

            <div class="index-system">
              <el-dropdown>
                <i class="el-icon-s-tools" style="font-size: 20px"></i>
                <el-dropdown-menu>
                  <el-dropdown-item>查看</el-dropdown-item>
                  <el-dropdown-item>新增</el-dropdown-item>
                  <el-dropdown-item>删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>

          </div>
        </el-header>
      </el-container>
    </div>

    <div style="height: 90%;width: 100%">
      <el-container style="height: 100%;width: 100%">
        <el-aside style="height: 100%;width: 15%;">
          <el-scrollbar>
            <el-menu default-active="0" mode="vertical" @select="selectCourseType">
              <el-menu-item v-for="(item, index) in courseTypeList" :key="index" :index="item.id">{{
                  item.name
                }}
              </el-menu-item>
            </el-menu>
          </el-scrollbar>
        </el-aside>


        <el-main style="width: 85%; height: 100%;" v-loading="loading">

          <el-scrollbar style="width:100%;">
            <div class="index-course">
              <div class="index-course-display">
                <el-card v-for="(item, index) in indexCourseList" :key="index" class="course-card">
                  <img :src="item.coverUrl" class="image">
                  <div style="padding: 14px 0 0 0; display: flex; flex-direction: column; align-items: center;">
                    <span>{{ item.name }}</span>
                    <span style="font-size: 10px; margin-top: 5px">{{ item.teacherName }}</span>
                  </div>
                </el-card>
              </div>
            </div>
          </el-scrollbar>


        </el-main>

      </el-container>


    </div>


  </div>
</template>
<script>
import logo from '@/assets/xingyue/logo.png'
import { getCourseTypeInfo, getCourseList, changeCourseList } from '@/api/xingyue/index'

export default {
  data() {
    return {
      courseSeach: '',
      logo,
      loading: false,
      courseTypeList: [],
      indexCourseList: [],
      page: {
        current: 1,
        total: 0,
        size: 10
      }
    }
  },
  created() {

  },
  mounted() {
    this.initCourseType()
    this.initIndexCourse()
  },
  methods: {
    async selectCourseType(e) {
      await changeCourseList(e).then(res => {
        this.loading = true
        if (res.code==200) {
          setTimeout(()=>{
            this.$set(this,'indexCourseList',res.data);
            this.loading=false;},500)
        }else{
          this.$message.error(response.msg || '服务器内部异常')
        }
      })
    },
    async initCourseType() {
      await getCourseTypeInfo().then(response => {
        if (response.code == 200) {
          response.data.unshift({
            id: 0,
            name: '首页'
          }, {
            id: 15,
            name: '经典歌剧'
          })
          this.courseTypeList = response.data
        } else {
          this.$message.error(response.msg || '服务器内部异常')
        }
      })
    },
    async initIndexCourse() {
      const data = {
        condition: {},
        page: this.page
      }
      await getCourseList(data).then(response => {
        if (response.code == 200) {
          this.indexCourseList = response.data.list
        } else {
          this.$message.error(response.msg || '服务器内部异常')
        }
      })
    }

  },
  computed: {}
}
</script>

<style scoped>

.index-course {
  width: 100%;
  //border: red 2px solid;
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
}

.course-card {
  width: 18%;
  height: 180px; /* 设置卡片的固定高度 */
  margin: 10px;
  display: inline-block;
  float: left;
}

.index-course-display {
  width: 100%;
  //border: black 2px solid;
  padding: 5px 0 0 10px;
}

.image {
  width: 160px;
  height: 90px;
  display: block;
}

.index-seach {
  margin: 2% 0 0 0; /* 上右下左 */
  width: 30%;
  height: auto;
}

.logo {
  margin: 10% 0 0 0;

  > img {
    margin: 0 0 0 0;
    width: 35px;
    height: 35px;
  }
}

.index-system {
  margin: 2% 0 0 0;
  width: 40px;
  height: 40px;
}
</style>
